import { Form, Button, Col, Input, Popover, Progress, Row, Select, message, Checkbox } from 'antd';
import React, { useState, useEffect } from 'react';
import { connect, FormattedMessage, formatMessage } from 'umi';
import styles from './style.less';
import request from "@/utils/request";

const MinerAdd = ({ submitting, dispatch, minerAdd }) => {
  let interval;
  const [form] = Form.useForm();
  const [initialValues,setInitialValues] = useState({})

  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 8 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 16 },
    },
  };
  const tailFormItemLayout = {
    wrapperCol: {
      xs: {
        span: 24,
        offset: 0,
      },
      sm: {
        span: 16,
        offset: 8,
      },
    },
  };


  useEffect(() => {
    console.log(minerAdd)
    if (!minerAdd) {
      return;
    }
    console.log(minerAdd)

    if (typeof minerAdd.Msg === 'undefined') {
      return;
    } // const account = form.getFieldValue('mail');
    console.log(minerAdd)

  }, []);
  useEffect(
    () => () => {
      clearInterval(interval);
    },
    []
  );

  useEffect(
    ()=>{
      const minerId = getQueryVariable("minerId")

      if (minerId) {
        console.log(minerId);
        request(`/api/miner/getByMinerId?minerId=${minerId}`).then(res=>{
          if (res.Code != 0 ){
            console.log(res.Msg)
          }else{
            form.setFieldsValue(res.Data)
            setInitialValues(res.Data)
          }
          console.log(res)
        })
      }

    }
  ,[])

  const onFinish = values => {
    {
      initialValues.MinerId ?
        dispatch({
          type: 'minerAdd/update',
          payload: {...{MinerId:getQueryVariable("MinerId")},...values},
        })
    :
      dispatch({
        type: 'minerAdd/submit',
        payload: {...values},
      });
    }
  };

  function getQueryVariable(variable)
  {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i=0;i<vars.length;i++) {
      var pair = vars[i].split("=");
      if(pair[0] == variable){return pair[1];}
    }
    return(false);
  }


  return (
    <div className={styles.main}>
      <h3>
        { initialValues.MinerId ? "更新" : "注册"}
      </h3>
      <Form  {...formItemLayout} form={form} name="MinerAdd" onFinish={onFinish}>

        <Form.Item
          name="MinerId"
          label="矿工号"
          rules={[
            {
              required: true,
              message: '请输入矿工号',
            },
          ]}
        >
          <Input   disabled={initialValues.MinerId ?true:false}/>
        </Form.Item>

        <Form.Item
          name="PoolName"
          label="矿池名称"
        >
          <Input />
        </Form.Item>

        <Form.Item
          name="Size"
          label="扇区大小"
        >
          <Input />
        </Form.Item>

        <Form.Item {...tailFormItemLayout}>
          <Button
            size="large"
            loading={submitting}
            className={styles.submit}
            type="primary"
            htmlType="submit"
          >
            { initialValues.MinerId ? "更新" : "添加"}
              </Button>

        </Form.Item>
      </Form>
    </div>
  );
};

export default connect(({ minerAdd, loading }) => ({
  minerAdd,
  submitting: loading.effects['minerAdd/submit'],
}))(MinerAdd);
